<template>
  <div class="role-management">
    <!-- 搜索栏 -->
    <el-form :inline="true" class="search-bar">
      <el-form-item label="角色名称：">
        <el-input v-model="searchCriteria.name"  placeholder="请输入" style="width: 120px"></el-input>
      </el-form-item>
      
      <el-form-item label="权限字符：">
        <el-input v-model="searchCriteria.authChar"  placeholder="请输入" style="width: 120px"></el-input>
      </el-form-item>
 
      <el-form-item label="角色状态：">
        <el-select v-model="searchCriteria.status"  placeholder="所有" style="width: 120px">
          <el-option label="所有" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
 
      <el-form-item label="创建时间：">
        <el-date-picker 
          v-model="searchCriteria.dateRange" 
          type="daterange"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="结束"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>
 
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetCriteria">重置</el-button>
        <el-button type="danger" @click="deleteSelected">删除</el-button>
      </el-form-item>
    </el-form>
 
    <!-- 操作按钮组 -->
    <div class="action-buttons">
      <el-button type="primary" :icon="Plus" @click="addRole">新增</el-button>
    </div>
 
    <!-- 数据表格 -->
    <el-table 
      :data="filteredTableData"
      style="width: 100%"
      class="custom-table"
      @selection-change="handleSelectionChange"
      ref="tableRef"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="id" label="角色编号" width="100"></el-table-column>
      <el-table-column prop="name" label="角色名称" width="120"></el-table-column>
      <el-table-column prop="authChar" label="权限字符" width="120"></el-table-column>
      <el-table-column prop="order" label="显示顺序" width="100"></el-table-column>
      <el-table-column label="角色状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status  ? 'success' : 'danger'">
            {{ scope.row.status  ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button type="text" size="small" @click="editRole(scope.row)"> 编辑</el-button>
          <el-button type="text" size="small" style="color: #F56C6C" @click="confirmDeleteRole(scope.row)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <!-- 分页信息 -->
    <div class="pagination-info">
      第 1 到 {{ filteredTableData.length  }} 条，共 {{ filteredTableData.length  }} 条记录 
    </div>
 
    <!-- Dialog for edit and add -->
    <el-dialog v-model="dialogVisible" :title="isEditMode ? '编辑角色' : '新增角色'">
      <el-form :model="currentRole">
        <el-form-item label="角色名称">
          <el-input v-model="currentRole.name"></el-input> 
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="currentRole.authChar"></el-input> 
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input v-model="currentRole.order"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="currentRole.status"  active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRole">确 定</el-button>
      </template>
    </el-dialog>
    
    <!-- Confirm delete dialog -->
    <el-dialog v-model="confirmDeleteVisible" title="确认删除">
      <span>您确定要删除此角色吗？</span>
      <template #footer>
        <el-button @click="confirmDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRole">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
 
// 表格数据 
const tableData = ref([
  {
    id: 1,
    name: '管理员',
    authChar: 'admin',
    order: 1,
    status: true,
    createTime: '2018-02-16 11:33:00'
  },
  {
    id: 100,
    name: '教师',
    authChar: 'teacher',
    order: 2,
    status: true,
    createTime: '2019-12-10 19:26:58'
  },
  {
    id: 2,
    name: '学生',
    authChar: 'student',
    order: 3,
    status: true,
    createTime: '2018-02-16 11:33:00'
  }
])
 
// 搜索条件 
const searchCriteria = reactive({
  name: '',
  authChar: '',
  status: '',
  dateRange: []
})
 
// 对话框状态 
const dialogVisible = ref(false)
const confirmDeleteVisible = ref(false)
const isEditMode = ref(false)
 
// 当前操作的角色 
const currentRole = reactive({})
const roleToDelete = ref(null)
 
// 表格引用 
const tableRef = ref(null)
 
// 过滤后的表格数据 
const filteredTableData = computed(() => {
  return tableData.value.filter(role  => {
    const matchesName = role.name.includes(searchCriteria.name) 
    const matchesAuthChar = role.authChar.includes(searchCriteria.authChar) 
    const matchesStatus = searchCriteria.status  ? 
      role.status  === (searchCriteria.status  === '1') : true 
 
    // 日期范围过滤 
    const matchesDateRange = searchCriteria.dateRange.length  === 2 ?
      new Date(role.createTime)  >= searchCriteria.dateRange[0]  &&
      new Date(role.createTime)  <= searchCriteria.dateRange[1]  : true 
 
    return matchesName && matchesAuthChar && matchesStatus && matchesDateRange 
  })
})
 
// 处理选中行变化 
const handleSelectionChange = (val) => {
  console.log(' 选中项:', val)
}
 
// 搜索 
const handleSearch = () => {
  console.log('Searching  with criteria:', searchCriteria)
}
 
// 重置搜索条件 
const resetCriteria = () => {
  searchCriteria.name  = ''
  searchCriteria.authChar  = ''
  searchCriteria.status  = ''
  searchCriteria.dateRange  = []
  console.log('Search  criteria reset')
}
 
// 新增角色 
const addRole = () => {
  Object.assign(currentRole,  { 
    name: '', 
    authChar: '', 
    order: null, 
    status: true 
  })
  isEditMode.value  = false 
  dialogVisible.value  = true 
}
 
// 编辑角色 
const editRole = (role) => {
  Object.assign(currentRole,  { ...role })
  isEditMode.value  = true 
  dialogVisible.value  = true 
}
 
// 保存角色 
const saveRole = () => {
  if(isEditMode.value)  {
    // 编辑现有角色 
    const index = tableData.value.findIndex(role  => role.id  === currentRole.id) 
    if(index !== -1) {
      tableData.value[index]  = { ...currentRole }
    }
  } else {
    // 新增角色 
    currentRole.id  = Date.now()  // 生成ID(模拟)
    tableData.value.push({  ...currentRole })
  }
  dialogVisible.value  = false 
  console.log('Saved  role:', currentRole)
}
 
// 确认删除角色 
const confirmDeleteRole = (role) => {
  roleToDelete.value  = role 
  confirmDeleteVisible.value  = true 
}
 
// 删除角色 
const deleteRole = () => {
  tableData.value  = tableData.value.filter(role  => role.id  !== roleToDelete.value.id) 
  confirmDeleteVisible.value  = false 
  roleToDelete.value  = null 
  console.log('Deleted  role:', roleToDelete.value) 
}
 
// 删除选中项 
const deleteSelected = () => {
  const selectedRows = tableRef.value?.selection  
  if (!selectedRows || selectedRows.length  === 0) {
    ElMessage.warning(' 请先选择要删除的角色')
    return 
  }
  tableData.value  = tableData.value.filter(role  => !selectedRows.includes(role)) 
  console.log('Deleted  selected roles:', selectedRows)
}
</script>
 
<style scoped>
.role-management {
  padding: 20px;
  background: #fff;
}
 
.search-bar {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}
 
.action-buttons {
  margin: 15px 0;
}
 
.custom-table {
  margin-top: 10px;
}
 
.el-form-item {
  margin-bottom: 0;
}
 
.el-button--text {
  padding: 0 5px;
}
 
.pagination-info {
  padding: 12px 16px;
  background: #f5f7fa;
  border: 1px solid #ebeef5;
  border-top: none;
  text-align: right;
  color: #606266;
  font-size: 13px;
}
 
.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}
</style>